<template>
	<section>
		<!--工具条-->
			<el-col :span="8" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" >
				<el-form-item>
					<el-button size="medium" v-on:click="createQRC" type="primary">生成二维码</el-button>
				</el-form-item>
			<el-form-item>
					<el-button size="medium" v-on:click="exportQRC" type="primary">导出二维码</el-button>
				</el-form-item>
			</el-form>
		</el-col>
		<el-col :span="16" class="toolbar" style="padding-bottom: 0px;" >
			<el-form :inline="true" :model="selections" style="float:right">
				<el-form-item>
					<el-input v-model="selections.studentname" placeholder="输入学生姓名"></el-input>
				</el-form-item>
	  		<el-form-item >
            <el-select placeholder="选择省份" v-model="selections.provinces">
										<el-option v-for="province in provinceList"
															:key="province.province"
															:value="province.province"
															:label="province.province">
										</el-option>
								</el-select>
						</el-form-item>
				<el-form-item>
					<el-button size="medium" type="primary" v-on:click="getUser">查询</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table  :data="users" highlight-current-row v-loading="loading" @selection-change="selsChange" border 
		:header-cell-style="{background:'#204BD6',color:'#fff'}"
		style="width: 100%;">
			<el-table-column prop="admissionTicketCode" label="准考证号"  header-align='center' align='center' sortable>
			</el-table-column>
			<el-table-column prop="examineeName" label="姓名" header-align='center' width="150" sortable>
			</el-table-column>
			<el-table-column prop="identificationNumber" label="身份证号"  header-align='center' sortable>
			</el-table-column>
			<el-table-column prop="studioName" label="所属画室" header-align='center' sortable>
			</el-table-column>
			<el-table-column prop="province" label="所属省份" width="120" header-align='center' align='center' sortable>
			</el-table-column>
			<el-table-column prop="examinationRoomCode" label="考场"  header-align='center' align='center' sortable>
			</el-table-column>
			<el-table-column prop="examinationRoomCode" label="二维码"  header-align='center' align='center' sortable>
				<template scope="scope">
					  <el-image
					style="width: 32px; height: 32px:margin:auto"
					:src="imageurl"
					></el-image>
					 <el-image
					style="width: 32px; height: 32px:margin:auto"
					:src="imageurl"
					></el-image>
					 <el-image
					style="width: 32px; height: 32px:margin:auto"
					:src="imageurl"
					></el-image>
					 <el-image
					style="width: 32px; height: 32px:margin:auto"
					:src="imageurl"
					></el-image>
				</template>
			</el-table-column>
		</el-table>
		<!--新增界面-->
		<el-dialog title="生成二维码" :visible.sync="createQRCVisible" :close-on-click-modal="false" custom-class="rectround" width="350px">
			<qrcCreate ></qrcCreate>
		</el-dialog>
		<!--新增界面-->
		<el-dialog title="导出二维码" :visible.sync="exportQRCVisible" :close-on-click-modal="false" custom-class="rectround" width="300px" >
			<qrcExport ></qrcExport>
		</el-dialog>
	</section>
</template>
<script>
	import { getUserList ,examinee_listExamineeInfo} from '../../api/api';
	import provinceCodeList from "../../utils/provinceCode";
	import qrcCreate from "./QRCCreate"
	import qrcExport from "./QRCExport"
	export default {
		components:{qrcCreate,qrcExport},
		data() {
			return {
				createQRCVisible:false,
				exportQRCVisible:false,
				imageurl:"/static/assets/icon/erweima.png",
				provinceList:provinceCodeList,
				users: [],
				selections:{
					size:10,
					current:1,
					provinces:'',//选择省份
					studentname:'',//选择省份
				},
				loading: false,

			}
		},
		methods: {
			createQRC(){
				this.createQRCVisible=true
			},
			exportQRC(){
				this.exportQRCVisible=true
			},
			//获取用户列表
			getUser: function () {
				this.loading = true;
				examinee_listExamineeInfo(this.selections).then((res) => {
					console.log(res)
					this.total = res.result.total;
					this.users = res.result.records;
					this.loading = false;
				});
			},

			selsChange: function (sels) {
				this.sels = sels;
			},
		},
		mounted() {
			this.getUser();
		}
	};

</script>

<style>
.rectround {
  border-radius: 10px;
}
</style>